<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>部门管理</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome-4.7.0/css/font-awesome.css"/>
		<link rel="stylesheet" type="text/css" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="../css/manage_dprt.css"/>
		<script src="../util/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/manage-dprt.js" type="text/javascript" charset="utf-8"></script>
		<script src="../util/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<!--  头部导航条  -->
		<header class="dprt-header">
			<ul class="menu">
			  <li class=""><a href="javascript:;">部门管理</a></li>
			</ul>
		</header>
		<!--  头部导航条  -->
		
		<!-- 主要部分  -->
		<div class="container">
			
			<div class="table-detail">
				<!-- 部门管理表左边 -->
				<div class="detail-left fl">
					<span class="fa fa-list-alt" aria-hidden="true"></span>
					<span class="table-name">部门管理表</span>
					<div class="search-inpt">
						<input type="text" placeholder="搜索"/>
						<span class="glyphicon glyphicon-search"></span>
					</div>
				</div>
				<!-- 部门管理表左边 -->
				<!-- 部门管理表右边 -->
				<div class="detail-right fr">
					<button type="button" class="add-btn" data-toggle="modal" data-target="#myModal" data-backdrop="static">添加部门</button>
				</div>
				<!-- 部门管理表右边 -->
			</div>
			
			<table class="table table-bordered">
			  <thead>
					<tr class="first-row">
						<th>
							<input id="all-text" type="checkbox">
						</th>
						<th>序号</th>
						<th>部门名</th>
						<th>编号</th>
						<th>部门人数</th>
						<th>部门办公室</th>
						<th>部门电话</th>
						<th>主负责人</th>
						<th>副负责人</th>
						<th>档案</th>
						<th>操作</th>
						<th>备注</th>
					</tr>
				</thead>
				<tbody class="table-body">
					
				</tbody>
			</table>
			
			<div class="row">
				<div class="fl bottom-btn">
					<button type="button" class="btn  choose-all">全选</button>
					<button type="button" class="btn  inverse-all">反选</button>
					<button type="button" class="btn delete-all" data-toggle="modal" data-target="#myModal3">删除</button>
				</div>
				<div class="pag">
					<nav aria-label="Page navigation" class="page-nav">
					  <ul class="pagination pagination-md pagination-list">
					    <!-- <li class="pageLast">
					      <a href="#" aria-label="Previous" class="pre" >
					        <span aria-hidden="true" >&laquo;</span>
					      </a>
					    </li>
				
					    <li class="pageFirst">
					      <a href="#" aria-label="Next" class="next">
					        <span aria-hidden="true" >&raquo;</span>
					      </a>
					    </li> -->
					  </ul>
					</nav>
				</div>
			</div>
			
		</div>
		<!-- 主要部分 -->
		
		<!-- 添加部门弹窗 -->
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">添加部门</h4>
		      </div>
		      <div class="modal-body">
						<div class="row">
							<div class="dept-img col-sm-6"></div>
							<div class="new-dept-detail col-sm-6">
								<label>部门名称:</label>
								<input type="text" id="add-dept-name" value="" />
								<p></p>
								<label>部门编号:</label>
								<input type="text" id="add-dept-no" value="" />
								<p></p>
								<label>办公室号:</label>
								<input type="text" id="add-dept-adr" value="" />
								<p></p>
								<!-- <div class="add-number"> -->
									<label>部门电话:</label>
									<input type="text" id="add-dept-tel" value="" />
									<p></p>
								<!-- </div> -->
								<!-- <div class="add-minister"> -->
									<!-- <label>主负责人:</label>
									<input type="text" id="add-dept-mins" value="" />
									<p></p> -->
								<!-- </div> -->
								<!-- <div class="add-vice"> -->
									<!-- <label>副负责人:</label>
									<input type="text" id="add-dept-vice" value="" />
									<p></p> -->
								<!-- </div>	 -->
							</div>
							<div class="note col-sm-12">
								<label>备注:</label><input type="text" />
							</div>
						</div>	
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary add-dept-btn"  data-dismiss="modal">添加</button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- 添加部门弹窗 -->
		<!-- 信息弹窗 -->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel2">修改信息</h4>
		      </div>
		      <div class="modal-body">
							<ul class="alter-list modify-list">
								<li>
									<span>部门名称:</span>
									<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
									<input type="text" disabled="disabled" placeholder="" name="dept" id="mdf-dept-name">
									<p></p>
								</li>
								<li>
									<span>部门编号:</span>
									<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
									<input type="text" disabled="disabled" placeholder="" name="deptNo" id="mdf-dept-no">
									<p></p>
									
								</li>
								<li>
									<span>部门人数:</span>
									<!-- <i class="fa fa-pencil-square-o" aria-hidden="true"></i> -->
									<input type="text" disabled="disabled" placeholder="" name="number" id="mdf-dept-peo">
									<p></p>
									
								</li>
								<li>
									<span>部门地址:</span>
									<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
									<input type="text" disabled="disabled" placeholder="" name="office" id="mdf-dept-adr">
									<p></p>
									
								</li>
								<li>
									<span>部门电话:</span>
									<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
									<input type="text" disabled="disabled" placeholder="" name="tel" id="mdf-dept-tel">
									<p></p>
									
								</li>
								<li>
									<span>主负责人:</span>
									<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
									<input type="text" disabled="disabled" placeholder="" name="minister" id="mdf-dept-mins">
									<p></p>
								</li>
								<li>
									<span>副负责人:</span>
									<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
									<input type="text" disabled="disabled" placeholder="" name="Vice" id="mdf-dept-vice">
									<p></p>
								</li>
								
								<li></li>
								<li>
									<span>部门员工信息:</span><i class="fa fa-plus-square-o yg-add" aria-hidden="true" data-toggle="modal" data-target="#myModal5"></i>
									<ul class="employee-info">
										
									</ul>
									
								</li>
							</ul>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary info-modify" data-dismiss="modal">修改</button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- 信息弹窗 -->	
		<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel3">Modal title</h4>
		      </div>
		      <div class="modal-body">
		        确认删除？
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary delete-onerow" data-dismiss="modal">确定</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		
	<!-- 员工信息弹窗 -->
		<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel4">部门员工信息</h4>
		      </div>
		      <div class="modal-body">
		        <ul class="yg-list">
		        	<li>
								<div class="input-group">
									<span class="input-group-addon" >姓名</span>
									<input type="text" class="form-control">
								</div>
							</li>
		        	<li>
								<div class="input-group">
									<span class="input-group-addon" >部门</span>
									<input type="text" class="form-control" value="">
								</div>
							</li>
		        	<li>
								<div class="input-group">
									<span class="input-group-addon" >职务</span>
									<input type="text" class="form-control">
								</div>
							</li>
		        	<li>
								<div class="input-group">
									<span class="input-group-addon" >电话</span>
									<input type="text" class="form-control">
								</div>
							</li>
		        	<li>
								<div class="input-group">
									<span class="input-group-addon" >年龄</span>
									<input type="text" class="form-control">
								</div>
							</li>
		        </ul>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary yg-qr" data-dismiss="modal">确定</button>
		      </div>
		    </div>
		  </div>
		</div>
	<!-- 员工信息弹窗 -->
	
	<!-- 添加员工按钮 -->
	<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel5">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel5">添加员工</h4>
	      </div>
	      <div class="modal-body">
	        <ul class="yg-add-list">
	        	<li>
							<div class="input-group">
								<span class="input-group-addon" >姓名</span>
								<input type="text" class="form-control" id="add-yg-name">
								<p></p>
							</div>
						</li>
	        	<li>
							<div class="input-group">
								<span class="input-group-addon" >部门</span>
								<input type="text" class="form-control" id="add-yg-dept" value="1" disabled="disabled">
								<p></p>
							</div>
						</li>
	        	<li>
							<div class="input-group">
								<span class="input-group-addon">职务</span>
								<input type="text" class="form-control"  id="add-yg-pos" >
								<p></p>
							</div>
						</li>
	        	<li>
							<div class="input-group">
								<span class="input-group-addon" >电话</span>
								<input type="text" class="form-control" id="add-yg-tel">
								<p></p>
							</div>
						</li>
	        	<li>
							<div class="input-group">
								<span class="input-group-addon" >年龄</span>
								<input type="text" class="form-control " id="add-yg-age">
								<p></p>
							</div>
						</li>
	        </ul>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary yg-add-qr" data-dismiss="modal">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- 添加员工按钮 -->
	</body>
</html>
